﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
<style>
    .layui-form-label {
        width: 85px;
    }
    .layui-input-inline {
        width: 190px;
    }
    .search-box {
        margin: 15px;
        padding: 20px;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0,0,0,.05);
    }
    .page-container {
        margin: 15px;
        padding: 20px;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0,0,0,.05);
    }
    .layui-table {
        margin-top: 0;
    }
    .layui-table thead tr {
        background-color: #f8f8f8;
    }
    .layui-btn {
        margin-left: 10px;
    }
    .status-tag {
        padding: 2px 8px;
        border-radius: 2px;
        font-size: 12px;
        display: inline-block;
    }
    .status-pass {
        background-color: #e8f5e9;
        color: #4caf50;
    }
    .status-fail {
        background-color: #ffebee;
        color: #f44336;
    }
    .status-pending {
        background-color: #fff3e0;
        color: #ff9800;
    }
    .empty-data {
        text-align: center;
        padding: 30px 0;
        color: #999;
    }
    .empty-data i {
        font-size: 50px;
        color: #e0e0e0;
        margin-bottom: 10px;
    }
    .gender-tag {
        padding: 2px 8px;
        border-radius: 2px;
        font-size: 12px;
        display: inline-block;
    }
    .gender-male {
        background-color: #e3f2fd;
        color: #1976d2;
    }
    .gender-female {
        background-color: #e8f5e9;
        color: #43a047;
    }
</style>
<body class="layui-bg-gray">
    <div class="search-box">
        <div class="layui-form">
            <div class="layui-form-item" style="margin-bottom: 0;">
                <label class="layui-form-label">人员名称</label>
                <div class="layui-input-inline">
                    <input type="text" id="personName" name="personName" placeholder="请输入人员名称" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">面试官</label>
                <div class="layui-input-inline">
                    <input type="text" id="interviewPeople" name="interviewPeople" placeholder="请输入面试官" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" lay-submit lay-filter="searchForm">
                        <i class="layui-icon layui-icon-search"></i> 搜索
                    </button>
                    <button type="reset" class="layui-btn layui-btn-primary" onclick="resetForm()">
                        <i class="layui-icon layui-icon-refresh"></i> 重置
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="page-container">
        @Html.AntiForgeryToken()
        <table class="layui-table" lay-size="lg">
            <thead>
                <tr>
                    <th>人员名称</th>
                    <th>联系电话</th>
                    <th>用户性别</th>
                    <th>定级</th>
                    <th>面试反馈</th>
                    <th>面试结果</th>
                    <th>面试次数</th>
                    <th>面试时间</th>
                    <th>面试官</th>
                </tr>
            </thead>
            <tbody id="tb">
            </tbody>
        </table>
        <div id="pagination"></div>
    </div>
</body>
<script src="~/scripts/jquery-3.4.1.min.js"></script>
<script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>
<script>
    var layer;
    
    layui.use(['form', 'layer'], function(){
        var form = layui.form;
        layer = layui.layer;
        
        // 监听表单提交
        form.on('submit(searchForm)', function(data){
            console.log("表单提交的数据:", data.field);
            Show();
            return false;
        });
        
        // 初始化表单
        form.render();
        
        // 初始加载数据
        Show();
        
        // 添加回车键搜索支持
        $('input').keypress(function(e) {
            if(e.which == 13) {
                Show();
                return false;
            }
        });
    });
    
    function resetForm() {
        $("#personName").val("");
        $("#interviewPeople").val("");
        Show();
    }

    function Show(){
        var personName = $("#personName").val().trim();
        var interviewPeople = $("#interviewPeople").val().trim();
        
        console.log("发送查询请求，参数:", {
            personName: personName,
            interviewPeople: interviewPeople
        });
        
        // 显示加载层
        var loadIndex = layer.load(1, {
            shade: [0.3, '#fff']
        });
        
        $.ajax({
            url: "/OnboardingReview/ShowAuditOnboardingReview",
            type: "GET",
            data: {
                personName: personName,
                interviewPeople: interviewPeople
            },
            dataType: "json",
            success: function(res) {
                layer.close(loadIndex);
                console.log("服务器返回数据:", res);
                
                $("#tb").empty();
                
                try {
                    var data = Array.isArray(res) ? res : (res.data || res || []);
                    console.log("处理后的数据:", data);
                    
                    if(data && data.length > 0){
                        var html = '';
                        data.forEach(function(item){
                            // 根据面试结果设置不同的样式
                            var resultClass = '';
                            var resultText = item.interviewResult || '';
                            if(resultText.includes('通过')) {
                                resultClass = 'status-pass';
                            } else if(resultText.includes('不通过')) {
                                resultClass = 'status-fail';
                            } else {
                                resultClass = 'status-pending';
                            }
                            
                            // 设置性别样式
                            var genderClass = item.sex === 1 ? 'gender-male' : 'gender-female';
                            var genderText = item.sex === 1 ? '男' : (item.sex === 0 ? '女' : '');
                            
                            html += `
                                <tr>
                                    <td>${item.personName || ''}</td>
                                    <td>${formatPhone(item.phone) || ''}</td>
                                    <td><span class="gender-tag ${genderClass}">${genderText}</span></td>
                                    <td>${item.gradingMatch || ''}</td>
                                    <td>${item.interviewFeedback || ''}</td>
                                    <td><span class="${resultClass}">${resultText}</span></td>
                                    <td>${item.interviewNumber || 0}</td>
                                    <td>${formatDateTime(item.interviewTime) || ''}</td>
                                    <td>${item.interviewPeople || ''}</td>
                                </tr>
                            `;
                        });
                        $("#tb").html(html);
                        
                        // 显示查询结果数量
                        layer.msg(`查询到 ${data.length} 条记录`, {icon: 1});
                    } else {
                        $("#tb").html(`
                            <tr>
                                <td colspan="9">
                                    <div class="empty-data">
                                        <i class="layui-icon layui-icon-face-cry"></i>
                                        <p>暂无数据</p>
                                    </div>
                                </td>
                            </tr>
                        `);
                        layer.msg('未查询到数据', {icon: 0});
                    }
                } catch (error) {
                    console.error("数据处理错误:", error);
                    $("#tb").html(`
                        <tr>
                            <td colspan="9">
                                <div class="empty-data">
                                    <i class="layui-icon layui-icon-face-cry"></i>
                                    <p>数据处理错误</p>
                                </div>
                            </td>
                        </tr>
                    `);
                    layer.msg('数据处理出错', {icon: 2});
                }
            },
            error: function(xhr, status, error) {
                layer.close(loadIndex);
                console.error("请求错误:", {
                    status: status,
                    error: error,
                    response: xhr.responseText
                });
                $("#tb").html(`
                    <tr>
                        <td colspan="9">
                            <div class="empty-data">
                                <i class="layui-icon layui-icon-face-cry"></i>
                                <p>加载失败</p>
                            </div>
                        </td>
                    </tr>
                `);
                layer.msg('加载数据失败', {icon: 2});
            }
        });
    }
    
    function formatDateTime(dateTimeStr) {
        if (!dateTimeStr) return '';
        try {
            var date = new Date(dateTimeStr);
            if (isNaN(date.getTime())) return dateTimeStr;
            
            return date.getFullYear() + '-' + 
                   padZero(date.getMonth() + 1) + '-' + 
                   padZero(date.getDate()) + ' ' + 
                   padZero(date.getHours()) + ':' + 
                   padZero(date.getMinutes()) + ':' + 
                   padZero(date.getSeconds());
        } catch (error) {
            console.error("日期格式化错误:", error);
            return dateTimeStr;
        }
    }
    
    function formatPhone(phone) {
        if (!phone) return '';
        // 格式化电话号码为 xxx-xxxx-xxxx
        return phone.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');
    }
    
    function padZero(num) {
        return num < 10 ? '0' + num : num;
    }
</script>